<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码电子名片</title>
    <style>
        .row > div {
            margin-bottom: 15px;
        }

        span.input-group-addon {

        }
    </style>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="shortcut icon" href="/static/img/Head.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/static/plugins/fileinput-4.1.9/css/fileinput.min.css"/>
<body>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">生成自定义电子名片</h3>
        </div>
        <div class="panel-body">
            <form class="bs-example bs-example-form" role="form">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">姓&emsp;&emsp;名</span>
                            <input type="text" class="form-control" placeholder="" value="张*" name="name">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">移动电话</span>
                            <input type="text" class="form-control" placeholder="" value="147********" name="tel">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">工作电话</span>
                            <input type="text" class="form-control" placeholder="" value="147********" name="work_tel">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">工作地址</span>
                            <input type="text" class="form-control" placeholder="" value="上海市xxxx" name="addr">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">公司名称</span>
                            <input type="text" class="form-control" placeholder="" value="xxxx公司" name="company">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">公司职位</span>
                            <input type="text" class="form-control" placeholder="" value="JAVA开发" name="title">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">公司职称</span>
                            <input type="text" class="form-control" placeholder="" value="程序员" name="role">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">电子邮件</span>
                            <input type="text" class="form-control" placeholder="" value="40*******@qq.com"
                                   name="email">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon">个人主页</span>
                            <input type="text" class="form-control" placeholder="" value="https://www.zhangbin.xin"
                                   name="url">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                        <span style="color:#f00;"> 提示：如果想让名片带logo，就请上传一个logo图片吧！</span>
                        <input style="display: none" id="fileValue" name="logo"/>
                        <input id="file_1" class="file" type="file" name="files" multiple data-min-file-count="1"/>

                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" id="qrcodeImg">

                    </div>
                </div>
            </form>
        </div>
    </div>

    <br>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <button class="btn btn-success" id="submit" style="width:100%">生成电子名片</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/plugins/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/plugins/fileinput-4.1.9/fileinput.min.js"></script><!--必须在jquery之后加载-->
<script type="text/javascript" src="/static/plugins/fileinput-4.1.9/locales/fileinput_locale_zh.js"></script>
<script>
    $("#file_1").fileinput({
        uploadUrl: '/demo/fileInputUpload/upload.zb',
        allowedFileTypes: ['image'],
        allowedFileExtensions: ["jpg", "png", "gif"],
        allowedPreviewTypes: ['image', 'text'],
        browseLabel: '选择logo图标',
        maxFileSize: 10 * 1024,//允许上传文件的大小，（单位：KB），包括扩展类型文件的限制
        minFileCount: 1,//上传的最小文件数
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary",//按钮样式
        showPreview: true,//是否显示预览
        showRemove: true,//是否显示移除按钮
        showCancel: true,//是否显示取消按钮
        uploadExtraData: {id: Math.random()}
    });
    $("#file_1").on("fileuploaded", function (event, data) {
        if (data.response) {
            $("#fileValue").val(data.response.path)
        }
    });
    $('.fileinput-remove-button').on('click', function () {
        $("#fileValue").val("");
    });
    var tem = false;
    $(function () {
        $("#submit").click(function () {
            if (tem) {
                return false;
            }
            tem = true;
            var param = {};
            $("form").find("input").each(function (index, el) {
                param[$(el).attr("name")] = $(el).val();
            });
            $.ajax({
                url: "/getQrcode.zb",
                type: "POST",
                data: param,
                dataTyp: "text",
                success: function (data) {
                    if (data) {
                        $("#qrcodeImg").html("<img src='/source/" + data + "'/>");
                    } else {
                        alert("生成名片失败!");
                    }
                    tem = false;
                }, error: function () {
                    alert("生成名片失败！");
                    tem = false;
                }
            })
        })
    })
</script>
</body>
</html>